<template>
  <div class="community-container">
    <div class="community-header">
      <h1>社区</h1>
      <div class="search-box">
        <input 
          type="text" 
          v-model="searchQuery" 
          placeholder="搜索用户..."
          @input="handleSearch"
        >
        <button class="search-btn">
          <i class="fas fa-search"></i>
        </button>
      </div>
    </div>

    <div class="community-content">
      <div class="sidebar">
        <div class="sidebar-section">
          <h3>热门话题</h3>
          <div class="topic-list">
            <div v-for="topic in hotTopics" :key="topic.id" class="topic-item">
              <span class="topic-name">#{{ topic.name }}</span>
              <span class="topic-count">{{ topic.count }}条讨论</span>
            </div>
          </div>
        </div>

        <div class="sidebar-section">
          <h3>活跃用户</h3>
          <div class="user-list">
            <div v-for="user in activeUsers" :key="user.id" class="user-item">
              <img :src="user.avatar" :alt="user.name" class="user-avatar">
              <div class="user-info">
                <span class="user-name">{{ user.name }}</span>
                <span class="user-level">Lv.{{ user.level }}</span>
              </div>
              <button class="follow-btn" :class="{ following: user.isFollowing }">
                {{ user.isFollowing ? '已关注' : '关注' }}
              </button>
            </div>
          </div>
        </div>
      </div>

      <div class="main-content">
        <div class="content-tabs">
          <button 
            v-for="tab in tabs" 
            :key="tab.id"
            class="tab-btn"
            :class="{ active: currentTab === tab.id }"
            @click="currentTab = tab.id"
          >
            {{ tab.name }}
          </button>
        </div>

        <div class="posts-list">
          <div v-for="post in filteredPosts" :key="post.id" class="post-card">
            <div class="post-header">
              <div class="author-info">
                <img :src="post.author.avatar" :alt="post.author.name" class="author-avatar">
                <div class="author-meta">
                  <span class="author-name">{{ post.author.name }}</span>
                  <span class="post-time">{{ post.createTime }}</span>
                </div>
              </div>
              <div class="post-actions">
                <button class="action-btn">
                  <i class="fas fa-ellipsis-h"></i>
                </button>
              </div>
            </div>

            <div class="post-content">
              <p class="post-text">{{ post.content }}</p>
              <div v-if="post.images && post.images.length" class="post-images">
                <img 
                  v-for="(image, index) in post.images" 
                  :key="index"
                  :src="image"
                  :alt="`图片 ${index + 1}`"
                  @click="previewImage(image)"
                >
              </div>
            </div>

            <div class="post-footer">
              <div class="interaction-buttons">
                <button class="interaction-btn" @click="likePost(post)">
                  <i class="fas fa-heart" :class="{ active: post.isLiked }"></i>
                  <span>{{ post.likes }}</span>
                </button>
                <button class="interaction-btn" @click="commentPost(post)">
                  <i class="fas fa-comment"></i>
                  <span>{{ post.comments }}</span>
                </button>
                <button class="interaction-btn" @click="sharePost(post)">
                  <i class="fas fa-share"></i>
                  <span>分享</span>
                </button>
              </div>
            </div>

            <div v-if="post.showComments" class="comments-section">
              <div class="comment-input">
                <img :src="currentUser.avatar" :alt="currentUser.name" class="user-avatar">
                <input 
                  type="text" 
                  v-model="newComment"
                  placeholder="写下你的评论..."
                  @keyup.enter="submitComment(post)"
                >
                <button class="submit-btn" @click="submitComment(post)">发送</button>
              </div>
              <div class="comments-list">
                <div v-for="comment in post.commentsList" :key="comment.id" class="comment-item">
                  <img :src="comment.author.avatar" :alt="comment.author.name" class="user-avatar">
                  <div class="comment-content">
                    <div class="comment-header">
                      <span class="comment-author">{{ comment.author.name }}</span>
                      <span class="comment-time">{{ comment.createTime }}</span>
                    </div>
                    <p class="comment-text">{{ comment.content }}</p>
                    <div class="comment-actions">
                      <button class="action-btn" @click="likeComment(comment)">
                        <i class="fas fa-heart" :class="{ active: comment.isLiked }"></i>
                        <span>{{ comment.likes }}</span>
                      </button>
                      <button class="action-btn" @click="replyComment(comment)">
                        <i class="fas fa-reply"></i>
                        <span>回复</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="load-more">
          <button class="load-more-btn" @click="loadMore">
            加载更多
          </button>
        </div>
      </div>
    </div>

    <div v-if="showImagePreview" class="image-preview-modal" @click="closeImagePreview">
      <img :src="previewImageUrl" alt="预览图片">
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const searchQuery = ref('')
const currentTab = ref('recommended')
const newComment = ref('')
const showImagePreview = ref(false)
const previewImageUrl = ref('')

const tabs = [
  { id: 'recommended', name: '推荐' },
  { id: 'following', name: '关注' },
  { id: 'hot', name: '热门' }
]

// 模拟当前用户数据
const currentUser = {
  id: 1,
  name: '当前用户',
  avatar: '/avatars/current-user.jpg'
}

// 模拟热门话题数据
const hotTopics = ref([
  { id: 1, name: '游戏攻略', count: 1234 },
  { id: 2, name: '角色讨论', count: 987 },
  { id: 3, name: '活动分享', count: 876 }
])

// 模拟活跃用户数据
const activeUsers = ref([
  {
    id: 1,
    name: '用户1',
    avatar: '/avatars/user1.jpg',
    level: 30,
    isFollowing: false
  }
])

// 模拟帖子数据
const posts = ref([
  {
    id: 1,
    author: {
      id: 1,
      name: '用户1',
      avatar: '/avatars/user1.jpg'
    },
    createTime: '2024-03-15 14:30',
    content: '这是一条测试帖子内容...',
    images: ['/posts/image1.jpg'],
    likes: 123,
    comments: 45,
    isLiked: false,
    showComments: false,
    commentsList: [
      {
        id: 1,
        author: {
          id: 2,
          name: '用户2',
          avatar: '/avatars/user2.jpg'
        },
        createTime: '2024-03-15 14:35',
        content: '这是一条评论...',
        likes: 12,
        isLiked: false
      }
    ]
  }
])

const filteredPosts = computed(() => {
  return posts.value.filter(post => {
    if (currentTab.value === 'following') {
      return post.author.isFollowing
    }
    return true
  })
})

const handleSearch = () => {
  // 实现搜索逻辑
}

const likePost = (post: any) => {
  post.isLiked = !post.isLiked
  post.likes += post.isLiked ? 1 : -1
}

const commentPost = (post: any) => {
  post.showComments = !post.showComments
}

const sharePost = (post: any) => {
  // 实现分享逻辑
}

const submitComment = (post: any) => {
  if (!newComment.value.trim()) return
  
  post.commentsList.push({
    id: Date.now(),
    author: currentUser,
    createTime: new Date().toLocaleString(),
    content: newComment.value,
    likes: 0,
    isLiked: false
  })
  
  post.comments++
  newComment.value = ''
}

const likeComment = (comment: any) => {
  comment.isLiked = !comment.isLiked
  comment.likes += comment.isLiked ? 1 : -1
}

const replyComment = (comment: any) => {
  // 实现回复逻辑
}

const previewImage = (image: string) => {
  previewImageUrl.value = image
  showImagePreview.value = true
}

const closeImagePreview = () => {
  showImagePreview.value = false
}

const loadMore = () => {
  // 实现加载更多逻辑
}
</script>

<style scoped>
.community-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.community-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.community-header h1 {
  margin: 0;
  color: #2c3e50;
}

.search-box {
  display: flex;
  gap: 0.5rem;
}

.search-box input {
  width: 300px;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.search-btn {
  padding: 0.8rem;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.community-content {
  display: flex;
  gap: 2rem;
}

.sidebar {
  width: 300px;
  flex-shrink: 0;
}

.sidebar-section {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.sidebar-section h3 {
  margin: 0 0 1rem;
  color: #2c3e50;
}

.topic-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.topic-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topic-name {
  color: #42b983;
  font-weight: 500;
}

.topic-count {
  color: #666;
  font-size: 0.9rem;
}

.user-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.user-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.user-info {
  flex: 1;
}

.user-name {
  display: block;
  font-weight: 500;
  color: #2c3e50;
}

.user-level {
  font-size: 0.9rem;
  color: #666;
}

.follow-btn {
  padding: 0.3rem 0.8rem;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.follow-btn.following {
  background: #f5f5f5;
  color: #666;
}

.main-content {
  flex: 1;
}

.content-tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

.tab-btn {
  padding: 0.8rem 1.5rem;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.tab-btn.active {
  background: #42b983;
  color: white;
  border-color: #42b983;
}

.posts-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.post-card {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.author-meta {
  display: flex;
  flex-direction: column;
}

.author-name {
  font-weight: 500;
  color: #2c3e50;
}

.post-time {
  font-size: 0.9rem;
  color: #666;
}

.post-actions {
  position: relative;
}

.action-btn {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 0.5rem;
}

.post-content {
  margin-bottom: 1rem;
}

.post-text {
  margin: 0 0 1rem;
  line-height: 1.6;
  color: #2c3e50;
}

.post-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem;
}

.post-images img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
}

.post-footer {
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.interaction-buttons {
  display: flex;
  gap: 1rem;
}

.interaction-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 0.5rem;
}

.interaction-btn i {
  font-size: 1.2rem;
}

.interaction-btn i.active {
  color: #e74c3c;
}

.comments-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.comment-input {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.comment-input input {
  flex: 1;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.submit-btn {
  padding: 0.8rem 1.5rem;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.comment-item {
  display: flex;
  gap: 1rem;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.comment-author {
  font-weight: 500;
  color: #2c3e50;
}

.comment-time {
  font-size: 0.9rem;
  color: #666;
}

.comment-text {
  margin: 0 0 0.5rem;
  line-height: 1.6;
  color: #2c3e50;
}

.comment-actions {
  display: flex;
  gap: 1rem;
}

.load-more {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.load-more-btn {
  padding: 0.8rem 2rem;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  color: #666;
}

.image-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.image-preview-modal img {
  max-width: 90%;
  max-height: 90vh;
  object-fit: contain;
}
</style> 